<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        /*css reset*/
        ul, li, ol {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 1200px;
            height: 40px;
            border: 1px solid blueviolet;
            /*浮动*/
            /*float: left;*/
        }

        ul > li {
            color: white;
            text-align: center;
            line-height: 40px;
            float: left;
            width: 200px;
            height: 40px;
            /*控制li的修饰内容(点)*/
            list-style: none;
            background: orange;
        }
        li:hover{
            background-color: #16af85;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>java</li>
    <li>php</li>
    <li>c++</li>
    <li>html</li>
    <li>python</li>
    <li>web</li>
</ul>
</body>
</html>